<pro-header></pro-header>

<!--引入list组件-->
<nz-card [nzBordered]="false">
    <!--  form表单搜索 -->
    <form nz-form (ngSubmit)="search()" [nzLayout]="'inline'">
        <div nz-row  [nzType]="'flex'" [nzJustify]="'start'" [nzGutter]="24">
            <div nz-col [nzSpan]="8" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-form-label><label>应用名称</label></div>
                    <div nz-form-control class="flex-1">
                        <nz-input [(ngModel)]="appItem.appName" name="appName" [nzSize]="'large'" [nzPlaceHolder]="'应用名称'" nzId="appName"></nz-input>
                    </div>
                </div>
            </div>
            <div nz-col [nzSpan]="8" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-form-label><label>应用代码</label></div>
                    <div nz-form-control class="flex-1">
                        <nz-input [(ngModel)]="appItem.appCode" name="appCode" [nzSize]="'large'" [nzPlaceHolder]="'应用代码'" nzId="appCode"></nz-input>
                    </div>
                </div>
            </div>
            <div *ngIf="expandForm" nz-col  [nzSpan]="8" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-form-label><label>应用类型</label></div>
                    <div nz-form-control class="flex-1">
                        <nz-select style="width:100%" [(ngModel)]="appItem.appType" nzAllowClear name="emprank"  [nzSize]="'large'" [nzPlaceHolder]="'应用类型'" nzId="emprank">
                            <nz-option  *ngFor="let i of appType;" [nzLabel]="i.itemName" [nzValue]="i.itemValue"></nz-option>
                        </nz-select>
                    </div>
                </div>
            </div>

            <div *ngIf="expandForm" nz-col [nzSpan]="8" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-form-label><label>是否开通</label></div>
                    <div nz-form-control class="flex-1">
                        <nz-select style="width:100%" [(ngModel)]="appItem.isOpen" nzAllowClear  name="isOpen" [nzSize]="'large'" [nzPlaceHolder]="'是否开通'" nzId="isOpen">
                            <nz-option  *ngFor="let i of isOpen;" [nzLabel]="i.itemName" [nzValue]="i.itemValue"></nz-option>
                        </nz-select>
                    </div>
                </div>
            </div>
            <div *ngIf="expandForm" nz-col  [nzSpan]="8" class="mb-md">
                <div nz-form-item class="d-flex">
                    <div nz-form-label><label>IP地址:</label></div>
                    <div nz-form-control class="flex-1">
                        <nz-input [(ngModel)]="appItem.ipAddr" name="Ip" [nzSize]="'large'" [nzPlaceHolder]="'IP地址'" nzId="ipAddr"></nz-input>
                    </div>
                </div>
            </div>
            <div nz-col [nzSpan]="expandForm ? 24 : 8" class="mb-md" [class.text-right]="expandForm">
                <button nz-button type="submit" [nzType]="'primary'" [nzLoading]="loading" [nzSize]="'large'">查询</button>
                <button nz-button type="reset" (click)="reset()" [nzSize]="'large'" class="mx-sm">重置</button>
                <a (click)="expandForm=!expandForm">
                    {{expandForm ? '收起' : '展开'}}
                    <i class="anticon" [class.anticon-down]="!expandForm" [class.anticon-up]="expandForm"></i>
                </a>
            </div>
        </div>
    </form>
    <!--列表组件-->

    <app-list #child
              [initDate]="data"
              (addCreat)="addHandler($event)"
              [selectedRows]="selectedRows"
              (buttonData)="buttonDataHandler($event)"
              (pageNumber)="monitorHandler($event)"
              (deleatData)="deleatData($event)"
              [configTitle]="configTitle"
              [buttons]="buttons"
              (isActive)="isActive($event)"
              (deleteBatch)="deleteBatch($event)"
              (buttonEvent)="buttonEvent($event)"
              (selectedRow)="selectedRow($event)"
              [headerDate]="headerData"
              [loading]="loading"
              [pageindex]='appItem.pi'
              [moreData]="moreData"
              [total]="total">
    </app-list>
</nz-card>

<!-- 弹出框 -->
<nz-modal [nzVisible]="modalVisible" [nzFooter]="modalFooter" [nzMaskClosable]="false"  [nzWidth]="1024" [nzTitle]="appTitle"  [nzConfirmLoading]="loading" [nzContent]="modalContent"
          (nzOnCancel)="modalVisible=false" [nzFooter]="modalFooter">
    <ng-template #modalContent>
        <form novalidate *ngIf="!ifshow"  (ngSubmit)="save(f)"  #f="ngForm" >
            <div nz-row  [nzType]="'flex'" [nzJustify]="'end'" [nzGutter]="24">
                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label for="funcCode">应用名称</label><span [ngClass]="{'fromErrors':appName.errors?.required}">* </span></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-input [(ngModel)]="appAdd.appName" name="appName" #appName="ngModel"  required [nzSize]="'large'" [nzPlaceHolder]="'应用名称'" nzId="appName"></nz-input>
                        </div>
                    </div>
                    <div *ngIf="appName.errors?.required && appName.touched"  nz-col [nzSpan]="6" [nzOffset]="3"     class="fromErrors">
                        请必须应用名称
                    </div>
                </div>
                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label>应用代码</label><span [ngClass]="{'fromErrors':appCode.errors?.required}">* </span></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-input [(ngModel)]="appAdd.appCode" required name="appCode" #appCode="ngModel" [nzSize]="'large'"
                                      [nzPlaceHolder]="'应用代码'"
                                      nzId="appCode"
                                      (nzBlur)="AppCodeexit(appTitle, appAdd.appCode)"></nz-input>
                            <nz-alert *ngIf='isappcodeSlash' nzBanner nzMessage="已存在相同的应用代码，请重新输入"></nz-alert>
                        </div>
                    </div>
                    <div *ngIf="appCode.errors?.required && appCode.touched"  nz-col [nzSpan]="6" [nzOffset]="3"     class="fromErrors">
                        请必须选择默认值
                    </div>
                </div>
                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label>应用类型</label></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-select style="width:100%" [(ngModel)]="appAdd.appType" nzAllowClear   name="appType"  [nzSize]="'large'" [nzPlaceHolder]="'应用类型'" nzId="appType">
                                <nz-option  *ngFor="let i of appType;" [nzLabel]="i.itemName" [nzValue]="i.itemValue"></nz-option>
                            </nz-select>
                        </div>
                    </div>
                </div>
                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label>是否开通</label></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-select style="width:100%" [(ngModel)]="appAdd.isOpen" nzAllowClear disabled   name="isOpen"  [nzSize]="'large'" [nzPlaceHolder]="'是否开通'" nzId="isOpen">
                                <nz-option  *ngFor="let i of isOpen;"   [nzLabel]="i.itemName" [nzValue]="i.itemValue"></nz-option>
                            </nz-select>
                        </div>
                    </div>
                </div>
                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label>ip地址</label><span [ngClass]="{'fromErrors':ipAddr.errors?.required}">* </span></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-input [(ngModel)]="appAdd.ipAddr" required name="ipAddr" #ipAddr="ngModel" id="ipaddrs" [nzSize]="'large'" [nzPlaceHolder]="'ip地址'" nzId="ipAddr"></nz-input>
                            <nz-alert *ngIf='isShowbranch == true' nzBanner nzMessage="请输入正确的ip地址"></nz-alert>
                        </div>
                    </div>
                    <div *ngIf="ipAddr.errors?.required && ipAddr.touched"  nz-col [nzSpan]="6" [nzOffset]="3"     class="fromErrors">
                       请必须输入ip
                    </div>
                </div>

                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label>服务名称</label><span [ngClass]="{'fromErrors':url.errors?.required}">* </span></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-input [(ngModel)]="appAdd.url" required name="url" #url="ngModel" [nzSize]="'large'"  id="urlName" [nzPlaceHolder]="'服务名称'" nzId="url"></nz-input>
                            <nz-alert *ngIf='isSlash == true' nzBanner nzMessage="必须'/'开头, 且不能输入汉字"></nz-alert>
                        </div>
                    </div>
                    <div *ngIf="url.errors?.required && url.touched"  nz-col [nzSpan]="6" [nzOffset]="3"     class="fromErrors">
                        请必须输入服务名称
                    </div>
                </div>

                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label>端口</label><span [ngClass]="{'fromErrors':ipPort.errors?.required}">* </span></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-input [(ngModel)]="appAdd.ipPort"  (ngModelChange)="checkipPort(appAdd.ipPort, ipPort.errors?.required)"   required name="ipPort" #ipPort="ngModel" [nzSize]="'large'" [nzPlaceHolder]="'端口'" nzId="ipPort"></nz-input>
                            <nz-alert *ngIf='isShowinport == true' nzBanner [nzMessage]="artfmsg"></nz-alert>
                        </div>
                    </div>
                </div>
                <div nz-col [nzSpan]="24" class="mb-md">
                    <div nz-form-item class="d-flex">
                        <div nz-col [nzSpan]="3"   nz-form-label class="alignment"><label>应用描述</label></div>
                        <div nz-col [nzSpan]="20" nz-form-control>
                            <nz-input [(ngModel)]="appAdd.appDesc" nzAutosize=true nzType="textarea" name="appDesc" [nzSize]="'large'" [nzPlaceHolder]="'应用描述'"
                                      nzId="appDesc"></nz-input>
                        </div>
                    </div>
                </div>
            </div>
            <div nz-row>
                <div nz-col [nzSpan]="6" [nzOffset]="19">
                    <button style="margin-right: 16%" nz-button [nzType]="'default'"  [nzSize]="'large'" (click)="result()">
                        取 消
                    </button>
                    <button nz-button type="submit" [nzType]="'primary'" [nzSize]="'large'" [disabled]="f.invalid"  [nzLoading]="isConfirmLoading">
                        提 交
                    </button>
                </div>
            </div>
        </form>
    </ng-template>
    <!--因为生产模式下，会找不到modalFooter，报错，所以在这里要声明一下-->
    <ng-template #modalFooter>
    </ng-template>
</nz-modal>

<!-- ngSwitch用法-->
<!--<div>
    <h1>{{title}}</h1>
    <div>
        <div [ngSwitch]="num">
            <div *ngSwitchCase="0">ngSwitchCase 0</div>
            <div *ngSwitchCase="1">ngSwitchCase 1</div>
            <div *ngSwitchCase="2">ngSwitchCase 2</div>
            <div *ngSwitchCase="3">ngSwitchCase 3</div>
            <div *ngSwitchDefault>ngSwitchCase Default</div>
        </div>
    </div>
    <button (click)="changeElement()">Swicth</button>
</div>-->


